<template>
  <div class="maintenanceOfChargingItems h100">
    <div class="PageContent">
        <el-col :span="4" class="left-tree">
          <el-row style="text-align: center;line-height: 5em;">
            <el-button type="primary" icon="el-icon-circle-plus-outline" v-if="btnRight.btnChargingItemsServiceAdd" plain @click="addType()"></el-button>
            <el-button type="primary" icon="el-icon-edit"  v-if="btnRight.btnChargingItemsServiceEdit"  @click="modifyType()"></el-button>
            <el-button type="danger" icon="el-icon-delete"  v-if="btnRight.btnChargingItemsServiceDelete" @click="removeType()"></el-button>
          </el-row>
          <el-tree :data="treeData" ref="tree"
                   :props="defaultProps"
                   node-key="typeCode"
                   default-expand-all
                   check-strictly
                   highlight-current
                   @node-click="handleClick"
          ></el-tree>
        </el-col>
        <el-col :span="20"  class="right-tree">
          <el-row style="text-align: left;line-height: 5em;" class="searchData">
            <el-button type="primary" v-if="btnRight.btnChargingItemsItemAdd" plain @click="add()">添加</el-button>
            <el-button type="primary" v-if="btnRight.btnChargingItemsItemEdit"  @click="modify()">修改</el-button>
            <el-button type="danger"  v-if="btnRight.btnChargingItemsItemDelete" @click="remove()">删除</el-button>
            <el-input  v-model="searchData" @keyup.enter.native="GoodsSearch()" placeholder="根据项目名称或价格检索" style="width: 200px;"></el-input><el-button type="primary" plain  @click="GoodsSearch()">查询</el-button>
          </el-row>
          <el-table
            ref="singleTable"
            :data="tableData" :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
            border
            stripe
            @row-click="handleRowClick"
            @select="select" @select-all="selectAll"
            style="width: 100%;height: calc(100% - 125px);overflow-y: scroll">
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              property="itemCode"
              label="项目编码"
              align = 'center'
              width="250">
            </el-table-column>
            <el-table-column
              property="itemName"
              label="项目名称"
              align = 'center'
              width="150">
            </el-table-column>
            <el-table-column
              property="itemPrice"
              label="价格"
              align = 'center'
              width="100">
            </el-table-column>
            <el-table-column
              property="itemNumber"
              align = 'center'
              label="数量"
              width="100">
            </el-table-column>
            <el-table-column
              property="itemUnit"
              align = 'center'
              label="单位"
              width="100">
            </el-table-column>
            <el-table-column
              property="asGoods"
              align = 'center'
              label="服务/物品"
              width="100">
              <template slot-scope="{row,$index}">
                <span v-if="row.asGoods==0">服务</span>
                <span v-else-if="row.asGoods==1">物品</span>
              </template>
            </el-table-column>
            <el-table-column
              property="asPackage"
              align = 'center'
              label="是否物品包"
              width="150">
              <template slot-scope="{row,$index}">
                <span v-if="row.asPackage==0">普通服务物品</span>
                <span v-else-if="row.asPackage==1">物品包</span>
              </template>
            </el-table-column>
            <el-table-column
              property="asFixPrice"
              align = 'center'
              label="固定价格"
              width="150">
              <template slot-scope="{row,$index}">
                <span v-if="row.asFixPrice==1">固定价格</span>
                <span v-else-if="row.asFixPrice==0">议价</span>
              </template>
            </el-table-column>
            <el-table-column
              property="itemDescribe"
              align = 'center'
              label="描述">
            </el-table-column>
          </el-table>
          <p style="text-align: right;margin-top: 20px;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pager.currentPage"
              :page-size="pager.pageSize"
              background
              layout="prev, pager, next, jumper"
              :total="pager.total">
            </el-pagination>
          </p>
        </el-col>
    </div>
    <el-dialog title="物品、服务收费项目分类维护" :visible.sync="dialogVisibleType" width="700px" v-dialogDrag   border >
      <el-form :model="saveTypeData" :rules="rulestype" ref="chargingTypedialog" :inline="true" label-width="120px" :disabled="saveFlagType">
        <el-row :gutter="5">
          <el-form-item label="所属父项目:" >
            <el-select v-model="saveTypeData.parentId" placeholder="请选择" style="width: 495px;">
              <el-option  label="服务、物品分类" value="0"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="分类编码:" prop="typeCode" >
            <el-input v-model="saveTypeData.typeCode" maxlength="50" style="width: 495px;"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="分类名称:" prop="typeName">
            <el-input v-model="saveTypeData.typeName"  maxlength="50" style="width: 495px;"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="描述:"  >
            <el-input type="textarea" v-model="saveTypeData.typeDescribe" style="width: 495px;"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="备注:"  >
            <el-input  type="textarea" v-model="saveTypeData.remark" style="width: 495px;"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary" v-if="btnRight.btnChargingItemsServiceSave" @click="saveType()"  :disabled="saveFlagType">保存</el-button>
        <el-button type="primary" v-if="btnRight.btnChargingItemsServiceCancel" plain @click="dialogVisibleType = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="物品、服务收费项目维护" :visible.sync="dialogVisible" width="700px" v-dialogDrag   border >
      <el-form :model="saveData.goodsService" :rules="rules" ref="chargingdialog" class="saveform"  :inline="true" label-width="120px" :disabled="saveFlag">
        <el-row :gutter="5">
          <el-form-item label="所属父项目:" >
            <el-input v-model="saveData.goodsService.serviceTypeName" disabled></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="项目编码:" prop="itemCode">
            <el-input v-model="saveData.goodsService.itemCode" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="项目名称:" prop="itemName">
            <el-input v-model="saveData.goodsService.itemName" maxlength="50"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="项目价格:" prop="itemPrice" >
            <el-input  @keyup.native="proving()"  v-model="saveData.goodsService.itemPrice"  :maxlength="10"></el-input>
          </el-form-item>
          <el-form-item label="项目数量:" prop="itemNumber">
            <el-input @keyup.native="checkCount()" v-model="saveData.goodsService.itemNumber" :maxlength="10"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="项目单位:" >
            <el-input v-model="saveData.goodsService.itemUnit" maxlength="50"></el-input>
          </el-form-item>
          <el-form-item label="显示顺序:" >
            <el-input  onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null" v-model="saveData.goodsService.sort" maxlength="11"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="物品服务:" >
            <el-select v-model="saveData.goodsService.asGoods" placeholder="请选择" onkeydown="return (event.keyCode!=8)">
              <el-option
                v-for="item in goods"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item label="固定价格:" >
            <el-select v-model="saveData.goodsService.asFixPrice" placeholder="请选择">
              <el-option
                v-for="item in price"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="是否有效:" >
            <el-select v-model="saveData.goodsService.disableState" placeholder="请选择" onkeydown="return (event.keyCode!=8)">
              <el-option
                v-for="item in disableState"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="是否物品包:" >
            <el-select v-model="saveData.goodsService.asPackage" placeholder="请选择">
              <el-option
                v-for="item in package"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" v-if="saveData.goodsService.asPackage && btnRight.btnChargingItemsItemAddObj" @click="addPackage()">追加物品包物品</el-button>
          </el-form-item>
        </el-row>
        <el-row :gutter="5"  v-if="saveData.goodsService.asPackage">
          <div class="list" >
            <div class="item" v-for="(item,index) in saveData.servicePackageItems">
              <span class="title">{{item.itemName}}</span>
              <span class="num">{{item.itemNumber	}}</span>
              <input type="button" class="delete" value="删除" v-if="btnRight.btnChargingItemsItemDelete"  @click="deletePackageItems(index)"/>
            </div>
          </div>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="分类描述:">
            <el-input type="textarea" v-model="saveData.goodsService.itemDescribe" style="width: 535px;"></el-input>
          </el-form-item>
        </el-row>
        <el-row :gutter="5">
          <el-form-item label="备注:">
            <el-input  type="textarea" v-model="saveData.goodsService.remark" style="width: 535px;"></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: right">
        <el-button type="primary"  v-if="btnRight.btnChargingItemsItemSave"  @click="save()" :disabled="saveFlag">保存</el-button>
        <el-button type="primary" v-if="btnRight.btnChargingItemsItemCancel" plain @click="dialogVisible = false">取 消</el-button>
      </div>
      <el-dialog
        title="物品服务包"
        :visible.sync="dialogVisiblelist"
        width="45%"
        center>
        <el-row style="margin-bottom: 10px;">
          <label style="line-height: 40px;">根据收费项目或单价检索：<el-input v-model="search" style="width: 200px;"></el-input></label>
        </el-row>
        <el-table class="search"
                  ref="goodsMultipleTable"
                  :data="tables"
                  :header-cell-style="{background:'rgb(246,247,251)',color:'#606266'}"
                  stripe
                  tooltip-effect="dark"
                  style="margin: 0 auto;"
                  @row-click="goodsHandleRowClick"
                  @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="100">
          </el-table-column>
          <el-table-column align = 'center'  prop="itemName"  label="收费名称" width="200">
          </el-table-column>
          <el-table-column
            prop="itemPrice"
            align = 'right'
            label="单价"
            width="100">
          </el-table-column>
          <el-table-column
            prop="itemNumber"
            align = 'right'
            label="数量"
            width="100">
            <template slot-scope="{row,$index}">
              <input onkeyup="value= (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null"  style="width:100%;text-align: right;" v-model="row.itemNumber" >
            </template>
          </el-table-column>
          <el-table-column
            prop="itemUnit"
            align = 'center'
            label="单位"
            width="100">
          </el-table-column>
          <el-table-column
            prop="asGoods"
            align = 'center'
            label="是否物品"
            width="100">
            <template slot-scope="{row,$index}">
              <span v-if="row.asGoods==0">服务</span>
              <span v-else-if="row.asGoods==1">物品</span>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" style="text-align: right;" class="dialog-footer">
        <el-button type="primary" v-if="btnRight.btnChargingItemsItemCancelObj" @click="showSelectName()">确 定</el-button>
        <el-button type="primary" v-if="btnRight.btnChargingItemsItemCancelObj" plain @click="dialogVisiblelist = false">取 消</el-button>
      </span>
      </el-dialog>
    </el-dialog>

  </div>
</template>

<script>
  import * as API from '@/api/systemApplication'
  import {treeTransformate} from "../../utils/treeTransformate";
  import {toFixed} from "../../utils/tofixed";

  export default {
    name: "maintenanceOfChargingItems",
    data(){
      return{
        rules: {
          itemCode: [{required: true, message: '请输入项目编码', trigger: 'blur'}],
          itemName: [{required: true, message: '请输入项目名称', trigger: 'blur'}],
          itemPrice: [{required: true, message: '请输入项目价格', trigger: 'blur'}],
          itemNumber: [{required: true, message: '请输入项目数量', trigger: 'blur'}],
        },
        rulestype:{
          typeCode: [{required: true, message: '请输入分类编码', trigger: 'blur'}],
          typeName: [{required: true, message: '请输入分类名称', trigger: 'blur'}],
        },
        treeData: [{
          label: '服务，物品',
          children: []
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        tableData: [],
        currentRow: null,
        tableSelection:[],
        selectOrg: {
          orgsid: []
        },
        onpresscTime:0,  //  阻止短时间内连续点击
        saveFlagType:false, //保存标志
        saveFlag:false, //保存标志
        dialogVisibleType:false,  //项目类型分类维护对话框
        dialogVisible:false,//项目分类维护对话框
        saveTypeData:{       //保存服务物品类型基本信息
          "id": "",
          "parentId": "",
          "typeCode": "",
          "typeName": "",
          "typeDescribe": "",
          "sort": "",
          "remark": "",
          "version": 0
        },
        list:[1,2,3,4],               //物品包
        package:[
          { label:'普通服务物品',value:0 },
          { label:'物品包',value:1 }],
        goods:[
          { label:'服务',value:0 },
          { label:'物品',value:1 }],
        price:[
          { label:'固定价格',value:1 },
          { label:'议价',value:0 }],
        disableState:[
          { label:'有效',value:0 },
          { label:'无效',value:1 }],
        saveData:{             //保存服务物品基本信息
          "goodsService": {
            "id": 0,
            "serviceTypeId": 0,
            "serviceTypeName": "string",
            "itemCode": "string",
            "itemName": "string",
            "itemPrice": 0,
            "itemNumber": 0,
            "itemUnit": "string",
            "asGoods": 0,
            "asPackage": 0,
            "asFixPrice": 0,
            "disableState": 0,
            "itemDescribe": "string",
            "sort": 0,
            "remark": "string",
            "version": 0
          },
          "servicePackageItems": []
        },
        listNoPackage:[],
        dialogVisiblelist:false,
        searchData:"",//搜索
        pager:{
          "pageSize": 15,
          "total": 1,
          "currentPage": 1
        },
        search:"",/*查询物品服务包*/
        multipleSelection:[]/*选中的物品服务包*/
        ,     //按钮权限
        btnRight: {
          btnChargingItemsServiceAdd: true, //收费项目大类新增
          btnChargingItemsServiceEdit: true,//收费项目大类修改
          btnChargingItemsServiceDelete: true,//收费项目大类删除
          btnChargingItemsServiceSave: true,//收费项目大类保存
          btnChargingItemsServiceCancel: true,//收费项目大类取消
          btnChargingItemsItemAdd: true,//明细新增
          btnChargingItemsItemEdit: true,//明细修改
          btnChargingItemsItemDelete: true,//明细删除
          btnChargingItemsItemSave: true,//明细保存
          btnChargingItemsItemCancel: true,//明细取消
          btnChargingItemsItemAddObj: true,//追加物品包物品
          btnChargingItemsItemDeleteObj: true,//删除物品包物品
          btnChargingItemsItemSelectObj: true,//确定追加窗口物品
          btnChargingItemsItemCancelObj: true,//取消物品选择窗口
        }
      }
    },
    mounted(){
      this.loadGoodsServiceTypeListData()
      //载入按钮
      this.btnRight = this.$route.meta.buttons;
      //遍历属性赋值将true与false字符串转换成布尔型的值
      for (let key of Object.keys(this.btnRight)) {
        this.btnRight[key]= this.btnRight[key]=(this.btnRight[key]|| this.btnRight[key]=="true")?true:false;
      }
    },
    computed: {
      // 模糊搜索
      tables () {
        const search = this.search
        if (search) {
          // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
          return this.listNoPackage.filter(data => {
            // some() 方法用于检测数组中的元素是否满足指定条件;
            {
              return Object.keys(data).some(key => {
                if (key=="itemName" ||key =="itemPrice"){
                  return String(data[key]).indexOf(search) > -1
                }
              })
            }

          })
        }
        return this.listNoPackage
      }
    },
    methods: {
      goodsHandleRowClick(row, column, event) {
        this.$refs.goodsMultipleTable.toggleRowSelection(row);
        let data=this.$refs.goodsMultipleTable.selection
        this.multipleSelection = data
      },
      //tree中类型添加
      addType(){
        this.saveTypeData={
          "id": "",
          "parentId": "0",
          "typeCode": "",
          "typeName": "",
          "typeDescribe": "",
          "sort": "",
          "remark": "",
          "version": 0
        }
        this.dialogVisibleType=true
      },
      //tree中类型修改
      modifyType(){
        let data = this.$refs.tree.getCheckedNodes()
        if (data.length==0 ||data[0].label =="服务物品分类") {
          this.$message("未选中服务物品分类项")
          return
        }
        this.saveTypeData = data[0]
        this.saveTypeData.parentId = "0"
        this.dialogVisibleType=true
      },
      //tree中服务物品类型删除
      removeType(){
        let data = this.$refs.tree.getCheckedNodes()
        if (data.length==0 ||data[0].label =="服务物品分类") {
          this.$message("未选中服务物品分类项")
          return
        }
        this.$confirm('删除信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData=[
            {
              "id": data[0].id,
              "version": data[0].version
            }
          ]
          API['deleteGoodsServiceTypeWithId'](postData).then(response=>{
            const { message }=response;
            this.$message(message)
            this.loadGoodsServiceTypeListData()
          }).catch(error => {
            this.$message(error)
          })
        }).catch(() => {
          //几点取消的提示
        });
      },
      //table中类型添加
      add(){
        let data = this.$refs.tree.getCheckedNodes()
        if (data && data.length){
          this.saveData={"goodsService": {
              "id": "",
              "serviceTypeId": data[0].id,
              "serviceTypeName": data[0].label,
              "itemCode": "",
              "itemName": "",
              "itemPrice": "",
              "itemNumber": "",
              "itemUnit": "",
              "asGoods": 0,
              "asPackage": 0,
              "asFixPrice": 1,
              "disableState": 0,
              "itemDescribe": "",
              "sort": "",
              "remark": "",
              "version": ""
            },
            "goodsServicePackage": [
              {
                "serviceItemId": 0,
                "itemNumber": 0
              }
            ]}
          this.saveData.servicePackageItems = []
          /*let postData={
            "id": 0
          }
          API['loadGoodsServiceWithId'](postData).then(response=>{
            const { data }=response;
            if (!data) {
              return
            }
            if (data.goodsService) {
              this.saveData.goodsService = data.goodsService;
            }
            if (data.servicePackageItems)  {
              this.saveData.servicePackageItems = data.servicePackageItems;
            }
            this.dialogVisible=true
          }).catch(error => {
            this.$message(error)
          })*/
          this.dialogVisible=true
        } else{
          this.$message("请选择项目")
          return
        }

      },
      //table中类型修改
      modify(){
        let data=this.$refs.singleTable.selection
        this.saveData.servicePackageItems = []
        if (data.length==0) {
          this.$message("未选中服务物品")
          return
        }
        let postData={
          "id": data[0].id
        }
        API['loadGoodsServiceWithId'](postData).then(response=>{
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          if (data.goodsService) {
            this.saveData.goodsService = data.goodsService;
          }
          if (data.servicePackageItems)  {
            this.saveData.servicePackageItems = data.servicePackageItems;
          }
          this.dialogVisible=true
        }).catch(error => {
          this.$message(error)
        })
      },
      //table中服务物品类型删除
      remove(){
        let data = this.$refs.singleTable.selection

        if (data.length==0) {
          this.$message("未选中服务物品")
          return
        }
        this.$confirm('删除信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let postData = [
            {
              "id": data[0].id,
              "version": data[0].version
            }
          ]
          API['deleteGoodsServiceWithId'](postData).then(response => {
            const {message} = response;
            this.$message(message)
            let data = this.$refs.tree.getCheckedNodes()
            this.loadGoodsServiceListWithTypeData(data[0].id)
          }).catch(error => {
            this.$message(error)
          })
        }).catch(() => {
          //几点取消的提示
        });
      },
      //加载不是包的信息
      addPackage(){
        API['loadGoodsServiceListNoPackage']().then(response=>{
          let {data} = response
          if (data.length>0){
            this.listNoPackage = data
            this.dialogVisiblelist = true
          }

        }).catch(error => {
          this.$message(error)
        })
      },
      //删除选中的不是包的物品服务
      deletePackageItems(index){
        if (this.saveData.servicePackageItems && this.saveData.servicePackageItems.length && this.saveData.servicePackageItems[index]){
          this.saveData.servicePackageItems.splice(index,1)
          this.$forceUpdate()
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      /*追加服务物品包保存按钮*/
      showSelectName(){
        if (this.multipleSelection.length==0){
          this.$message("未选中项目")
          return
        }
        let id=[]
        //判断原来添加的列表中是否存在要添加的
        if (this.saveData.servicePackageItems && this.saveData.servicePackageItems.length>0) {
          this.saveData.servicePackageItems.forEach(n=>{
            this.multipleSelection.forEach((item,index)=>{
              //如果存在相同的id
              if (n.serviceItemId == item.id) {
                //源列表中数量加1
                //设置数量保存两位小数
                n.itemNumber=Number(n.itemNumber).toFixed(2);
                // n.itemNumber=n.itemNumber.match(/^\d*(\.?\d{0,2})/g)[0]||null;
                n.itemNumber = Number(n.itemNumber)+Number(item.itemNumber)
                //记录重复的id
                id.push(item.id)
              }
            })
          })
        }
        /*删除重复的数据*/
        if (id.length){
          id.forEach((i)=>{
            if (this.multipleSelection.length){
              this.multipleSelection.forEach((m,n)=>{
                if (m.id==i)
                  this.multipleSelection.splice(n,1)
              })
            }
          })
        }
        if (this.multipleSelection.length) {
          this.multipleSelection.forEach(item=> {
            this.saveData.servicePackageItems.push({
              serviceItemId: item.id,
              itemName: item.itemName,
              itemPrice: Number(item.itemPrice.match(/^\d+(?:.\d{0,2})?/)),
              itemNumber: Number(item.itemNumber.match(/^\d+(?:.\d{0,2})?/)),
              version: item.version
            })
          })
        }
        this.dialogVisiblelist = false
        this.search = ""
        this.multipleSelection=[]
      },
      //服务物品类型保存
      saveType(){
        if ((Date.now() - this.onpresscTime) > 2000) {
          this.onpresscTime = Date.now()
          console.log(Date.now())
        }else{
          return
        }
        this.$refs.chargingTypedialog.validate(valid=>{
          if (valid) {
            this.saveFlagType = true
            let postData=this.saveTypeData
            API['saveGoodsServiceType'](postData).then(response=>{
              const { message }=response;
              this.$message(message)
              this.dialogVisibleType = false
              this.loadGoodsServiceTypeListData()
              this.saveFlagType = false
            }).catch(error => {
              this.$message(error)
              this.saveFlagType = false
            })
            this.saveFlagType = false
          }
        })

      },
      //加载物品，服务类型基本信息
      loadGoodsServiceTypeListData(){
        let postData={
        }
        API['loadGoodsServiceTypeList'](postData).then(response=>{
          const { data }=response;
          if (!data) {
            this.$message('数据读取失败')
            return
          }
          this.treeData = treeTransformate(data)

        }).catch(error => {
          this.$message(error)
        })
      },
      /*分页*/
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pager.pagesize = size;
        alert(pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.pager.currentPage = currentPage;
        var data = this.$refs.tree.getCheckedNodes()
        if (data && data.length) {
          this.loadGoodsServiceListWithTypeData(data[0].id) //点击第几页
        }
      },
      GoodsSearch(){
        var data = this.$refs.tree.getCheckedNodes()
        if (data && data.length) {
          this.loadGoodsServiceListWithTypeData(data[0].id) //点击第几页
        }
      },
      //加载物品，服务类型详情
      loadGoodsServiceListWithTypeData(id){
        let postData={
          "serviceTypeId": id,
          "keyword":this.searchData,
          "pageSize": this.pager.pageSize,
          "currentPage": this.pager.currentPage,
        }
        API['loadGoodsServiceListWithType'](postData).then(response=>{
          const { data }=response;
          this.tableData = data.list;
          this.pager = data.pager
        }).catch(error => {
          this.$message(error)
        })
      },
      //tree单选
      handleClick(data,checked, node){
        if(checked && data.label!="服务物品分类"){
          this.$refs.tree.setCheckedNodes([data]);
          console.log(this.$refs.tree.getCheckedNodes())
          this.loadGoodsServiceListWithTypeData(data.id)
        }
      },

      //点击行触发，选中或不选中复选框
      handleRowClick(row, column, event) {
        if (this.tableSelection.length>0){
          this.$refs.singleTable.toggleRowSelection(this.tableSelection[0],false);
        }
        this.$refs.singleTable.toggleRowSelection(row);
        this.tableSelection = [row]
      },
      select(selection, row) {
        // 选择项大于1时
        if (selection.length > 1) {
          let del_row = selection.shift();
          // console.log('把数组的第一个元素从其中删除后', selection);
          this.$refs.singleTable.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）
        }
        this.tableSelection = selection
      },

      selectAll(selection) {
        if (selection.length >1) {
          selection.length = 1;
        }
        this.tableSelection = selection
      },
      //服务物品保存
      save(){
        if ((Date.now() - this.onpresscTime) > 2000) {
          this.onpresscTime = Date.now()
          console.log(Date.now())
        }else{
          return
        }
        this.$refs.chargingdialog.validate(valid=>{
          if (valid){
            this.saveFlag = true
            let postData={
              goodsService:this.saveData.goodsService,
              goodsServicePackage:this.saveData.servicePackageItems
            }
            console.log(postData)
            API['saveGoodsService'](postData).then(response=>{
              const { message }=response;
              this.$message(message)
              let data = this.$refs.tree.getCheckedNodes()
              this.loadGoodsServiceListWithTypeData(data[0].id)
              this.dialogVisible = false
              this.saveFlag = false
            }).catch(error => {
              this.$message(error)
              this.saveFlag = false
            })
          }
        })

      },//限制两位小数
      proving() {
        // this.saveData.goodsService.itemPrice 是input的值　　
        // 先把非数字的都替换掉，除了数字和.
        let obj=this.saveData.goodsService.itemPrice
        this.saveData.goodsService.itemPrice=this.checkNum(obj,2);
      }, // 检测数量
       checkCount() {
        // 先把非数字的都替换掉，除了数字和.
        let obj=this.saveData.goodsService.itemNumber
         this.saveData.goodsService.itemNumber=this.checkNum(obj,2);
      },checkNum(obj,n){
        // 先把非数字的都替换掉，除了数字和.
        obj = obj.replace(/[^\d.]/g, '');
        // 必须保证第一个为数字而不是.
        obj = obj.replace(/^\./g, '');
        // 保证只有出现一个.而没有多个.
        obj = obj.replace(/\.{2,}/g, '');
        // 保证.只出现一次，而不能出现两次以上
        obj =obj.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
        let index = -1
        for (let i in obj) {
          if (obj[i] === '.') {
            index = i
          }
          if (index !== -1) {
            //保留两位小数
            if (i - index > n) {
              obj = obj.substring(0, obj.length - 1)
            }
          }
        }
        //返回验证后的结果
         return obj;
      },
      //验证整数
        onlyNumber(){
           // 先把非数字的都替换掉，除了数字和.
          let obj=this.saveData.goodsService.sort;
               obj=Number.parseInt(obj);
          this.saveData.goodsService.sort=obj;
      }
    },
    watch:{
      "dialogVisible"() {
        if (this.dialogVisible == false) {
          this.$nextTick(() => {
            this.$refs.chargingdialog.resetFields();
          })
        }
      },
      "dialogVisibleType"() {
        if (this.dialogVisibleType == false) {
          this.$nextTick(() => {
            this.$refs.chargingTypedialog.resetFields();
          })
        }
      },
      "dialogVisiblelist"() {
        if (this.dialogVisiblelist == false) {
          this.search=""
        }
      }
    }
  }
</script>
<style>
  .search{
    height: 500px;
    overflow-y: scroll;
  }
  .maintenanceOfChargingItems .searchData  .el-input{
    margin:0 10px 0 50px;
  }
  .maintenanceOfChargingItems .searchData  .el-input__inner{
    vertical-align: middle!important;
  }
</style>
<style scoped>

  .list{
    display: flex;flex-wrap: wrap;
    margin:5px 0px;
    justify-content: space-between;
    padding-left: 120px;
    text-align: left;
    max-height: 120px;
    overflow-y: scroll;
  }
  .list .item {
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    /*width: 150px;*/
    height:30px;
    background-color: #efefef;
    padding:0 5px;
    border-radius:5px;
    overflow: hidden;
    margin-bottom: 10px;
    text-align: center;
  }
  .list .title{
    margin-right: 10px;
    float: left;
  }
  .list .delete{
    line-height: 30px;
    margin-left: 10px;
    color:red;
    float: right;
    cursor: pointer;
  }
  .wrapper{
    display: flex;
    flex-wrap: wrap;
    margin:5px 0px;
    justify-content: space-between;
    height:500px;
    overflow-y: auto;
  }
  .box-card {
    flex:0 0 150px;
    display: inline-block;
    box-shadow:  0 2px 12px 0 rgba(0,0,0,.1);;
    margin-bottom: 30px;
    margin-right: 10px;
  }
  .box-card .item {
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
    width: 100%;
    height: 90px;
    text-align: center;
    padding: 0 1em;
    border-radius:5px;
    overflow: hidden;
  }
  .item:hover{
    cursor: pointer;
  }
  .item:last-child{
    margin-bottom: 0px;
  }
  .item.select{
    background-color: lightgreen;
  }
  .item h2{
    height: 30px;
    overflow: hidden;
  }

</style>
